<template>
  <div class="main">
    <van-tabbar v-model="active" @change="changeTab" v-show="isShow">
      <van-tabbar-item>
        <van-icon
          class="iconfont icon-icon-test3"
          slot="icon"
          size="1.3rem"
        ></van-icon>
        <span>首页</span>
      </van-tabbar-item>
      <van-tabbar-item>
        <van-icon
          class="iconfont icon-icon-test1"
          slot="icon"
          size="1.3rem"
        ></van-icon>
        <span>搜索</span>
      </van-tabbar-item>
      <van-tabbar-item>
        <van-icon
          class="iconfont icon-icon-test2"
          slot="icon"
          size="1.3rem"
        ></van-icon>
        <span>我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import "@/assets/iconfont/iconfont.css";
import Vue from "vue";
import { Tabbar, TabbarItem, Icon } from "vant";

Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Icon);
export default {
  data() {
    return {
      isShow:true,
      active: 0,
      url:["/","/search","/my"]
    };
  },
  created(){
    let path=this.$route.path;
    let index=this.url.indexOf(path)
    this.active=index>-1 ? index:0
  },
  methods:{
    changeTab(index){
      this.$router.push(this.url[index])
    }
  }
};
</script>
<style scoped>
/* .main{
  height: 50px;
  width: 100%;
  position: absolute;
  bottom: 0%;
} */
</style>